<!--
 * @Descripttion:
 * @version:
 * @Author: QYFeng
 * @Date: 2021-04-19 22:28:37
 * @LastEditors: QYFeng
 * @LastEditTime: 2021-04-19 23:37:41
-->
<template>
  <div class="footer-wrap">
    <div class="lf">
      <div class="h1">为文化事业砥砺奋进</div>
      <p>
        友情链接：
        <a v-for="(item,index) in configData.urls" :key="index" :href="item.url" target="_blank" rel="noopener noreferrer">{{item.title}}</a>
      </p>
      <p>备案号：{{ configData.icp }}</p>
      <p>公安备案：{{ configData.public_icp }}</p>
      <p>无道官版权所有</p>
    </div>
    <div class="md">
      <img :src="configData.logo_botton" alt="" srcset="" />
    </div>
    <div class="rt">
      <div class="h1">实时动态与招聘信息，关注我们</div>
      <div class="imgs">
        <a
          class="img"
          v-for="(item, index) in goodsData.slice(0,6)"
          :key="index"
          :href="item.url"
          target="_blank"
          rel="noopener noreferrer"
        >
          <img :src="item.icon" alt="" srcset="" />
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      configData: [], // 配置信息
      goodsData: [], //产品列表
    };
  },
  created() {
    this.$http.getConfig().then((res) => {
      if (res.data.code === 0) {
        this.configData = res.data.data;
      } else {
        this.$message.error("请求失败，请重试！");
      }
    });
    this.$http.getGoods().then((res) => {
      if (res.data.code === 0) {
        this.goodsData = res.data.data;
      } else {
        this.$message.error("请求失败，请重试！");
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.footer-wrap {
  padding: 80px 0;
  max-width: 1920px;
  margin: 0 auto;
  background: #292d38;
  color: #fff;
  display: flex;
  justify-content: center;
  text-align: left;
  .lf {
    .h1 {
      padding-bottom: 26px;
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: bold;
    }
    p {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      width: 370px;
      line-height: 34px;
      opacity: 0.6;
      a{
        color: #fff;
        margin-right: 10px;
      }
    }
  }
  .md {
    width: 273px;
    height: 200px;
    border-left: solid 2px rgba($color: #fff, $alpha: 0.6);
    border-right: solid 2px rgba($color: #fff, $alpha: 0.6);
    text-align: center;
    margin: 0 70px;
    img {
      width: 187px;
      height: 187px;
    }
  }
  .rt {
    padding-top: 35px;
    .h1 {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      opacity: 0.6;
    }
    .imgs {
      margin-top: 50px;
      .img {
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-right: 30px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .img:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
